<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>橘子汽车租赁</title>
    <script type='text/javascript' charset='utf-8' src='https://www.layuicdn.com/layui-v2.5.6/layui.js'></script>
    <link rel='stylesheet' type='text/css' href='https://www.layuicdn.com/layui-v2.5.6/css/layui.css' />
    <script type="text/javascript" charset='utf-8' src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body style="background-color: #F2F2F2">
<div class="layui-row layui-col-space15" style="margin: 20px;">
    <div class="layui-col-xs6">
        <div class="layui-card">
            <div class="layui-card-header">公司公告</div>
            <div class="layui-card-body layui-row">
                <table id="announcements" lay-filter="announcements"></table>
            </div>
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-card">
            <div class="layui-card-header">当前日历</div>
            <div class="layui-card-body layui-row">
                <div class="layui-inline" id="calendar"></div>
            </div>
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-card">
            <div class="layui-card-header">当前时间</div>
            <div class="layui-card-body layui-row">
                <div class="layui-inline" id="time"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="announcementsDialog">
    <h1 align="center">{{ d.title }}</h1>
    <blockquote class="layui-elem-quote" style="margin-top: 20px;">{{ d.operator }}</blockquote>
    <p style="margin-top: 20px;"><b>发布时间：</b>{{ d.created }}</p>
    <p style="margin-top: 20px;">{{ d.content }}</p>
</script>
<script>
    layui.use(['laydate', 'table', 'layer', 'laytpl'], function() {
        let laydate = layui.laydate;
        let table = layui.table;
        let layer = layui.layer;
        let laytpl = layui.laytpl;
        //直接嵌套显示
        laydate.render({
            elem: '#calendar',
            position: 'static',
            calendar: true
        });
        laydate.render({
            elem: '#time',
            type: 'time',
            position: 'static',
            value: new Date()
        });
        table.render({
            id: 'announcement',
            elem: '#announcements',
            url: 'announcement/all', //数据接口
            where: {
                status: -1
            },
            title: '公司通知',
            page: true, //开启分页
            limit: 9,
            limits: [9, 18, 27, 35, 45, 54],
            defaultToolbar: ['filter', 'print', 'exports'],//工具条
            cols: [ [ //表头
                {field: 'title', title: '标题', style:'cursor: pointer;'},
                {field: 'created', title: '创建时间', width:200, sort: true},
                {field: 'operator', title: '操作人', width:120},
            ] ],
            response: {
                statusCode: 200, //规定成功的状态码，默认：0
            },
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data.record //解析数据列表
                };
            }
        });

        //监听单元格事件
        table.on('row(announcements)', function(obj){
            let data = obj.data;
            let announcementsDialog = $('#announcementsDialog').html();
            data.type = 1;
            laytpl(announcementsDialog).render(data, function(html) {
                layer.open({
                    type: 1,
                    title: '公告详情',
                    area: ['400px', '460px'],
                    content: html,
                });
            });
        });
    });
</script>
</html>